<template>
	<view class="container">
		<view class="ava-container" @tap="changeAvatar">
			<view class="avatar">
				<image :src="avatar"></image>
			</view>
			<view>编辑头像</view>
		</view>
		<view class="name-container">
			<view class="title">姓名</view>
			<view><input type="text" v-model="nickname" /></view>
		</view>
		<view class="sex-container" @tap="showPicker">
			<view class="title">性别</view>
			<view>
				<view>{{sex[value]}}</view>
				<view>
					<image src='/images/rightarrow.png'></image>
				</view>
			</view>
		</view>
		<view class="quit" @tap="quit">
			<view>退出登录</view>
		</view>
		<view class="unload" @tap="unload">
			<view :class="btnDisabled?'disabled':''">保存</view>
		</view>
		<view class="pickSex" :class="show?'show':''">
			<picker-view indicator-style="height: 50px;" style="width: 100%; height: 380rpx;" v-model="value"
				@change="bindChange" immediate-change="true">
				<picker-view-column>
					<view v-for="(item,index) in sex" :key="index" style="line-height: 100rpx; text-align: center;">{{item}}
					</view>
				</picker-view-column>
			</picker-view>
			<view class="btn">
				<button type="default" @tap="cancle">取消</button>
				<button type="primary" @tap="confirm">确定</button>
			</view>
		</view>
		<view class="mask" v-if="show"  @tap="cancle"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 0,
				sex: ['女', '男'],
				show: false,
				btnDisabled: true,
				avatar: '',
				nickname: ''
			}
		},
		methods: {
			// 点击性别出现选择器
			showPicker() {
					this.show= !this.show
			},
			// 选择性别
			bindChange(e) {
				let value=e.detail.value[0]
				uni.setStorageSync('value', value+'')
			},
			// 取消
			cancle() {
				this.show= !this.show
			},
			// 确定
			confirm() {
				let timer = setTimeout(() => {
					let value = Number(uni.getStorageSync('value'))
						this.value=value
						this.show= !this.show
						this.btnDisabled= false
					uni.setStorageSync('sex', value+'')
					clearTimeout(timer)
				}, 800)
			},
			// 切换头像
			async changeAvatar() {
				let res = await this.$uploadImg(1)
				// tempFilePath可以作为img标签的src属性显示图片
				const tempFilePath = res.tempFilePaths[0]
				uni.setStorageSync('avatar', tempFilePath)
					this.avatar= tempFilePath
					this.btnDisabled= false
			},
			// 上传文件
			unload() {
				let that = this
				if (!that.btnDisabled) {
					const tempFilePath = uni.getStorageSync('avatar')
					let avatarUrl = uni.getStorageSync('avatar')
					let nickName = uni.getStorageSync('nickname')
					let gender = Number(uni.getStorageSync('sex'))
					let info = JSON.parse(uni.getStorageSync('info'))
					let openId = uni.getStorageSync('openId')
					avatarUrl && (info["headimgurl"] = avatarUrl)
					nickName && (info["nickname"] = nickName)
					gender && (info["sex"] = gender)
					openId && (info["openid"] = openId)
					uni.setStorageSync('info', JSON.stringify(info))
					uni.uploadFile({
						url: this.$serverUrl + '/user/info',
						filePath: tempFilePath,
						name: 'file',
						formData: {
							'info': JSON.stringify(info)
						},
						success(res) {
							const data = res.data
							// console.log(data)
							uni.showToast({
								title: '修改成功',
							})
								that.btnDisabled= !that.btnDisabled
							let timer = setTimeout(() => {
								uni.navigateBack()
								clearTimeout(timer)
							}, 1500)
						}
					})
				}
			},
			// 退出登录
			quit() {
				// 提示框
				uni.showModal({
					title: '提示',
					content: '确定退出登录？',
					success: function(res) {
						if (res.confirm) {
							uni.clearStorage({
								success: (res) => {
									uni.navigateBack()
								},
							})
						}
					}
				})
			},
			
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			let info = JSON.parse(uni.getStorageSync('info'))
				this.avatar= info ? info.headimgurl : '/static/img/defaultAvatar.png',
				this.nickname= info ? info.nickname : '用户' + new Date().getTime(),
				this.value= info ? [info.sex] : 1
		},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {
			try {
				uni.removeStorageSync('avatar')
				uni.removeStorageSync('nickname')
				uni.removeStorageSync('sex')
				uni.removeStorageSync('value')
			} catch (e) {
				console.log(e)
			}
		},
		}
</script>

<style>
.container{
    background-color:#fff ;
    width: 100%;
    height: 100vh;
}
.mask{
    position: absolute;
    top:0;
    left:0;
    z-index: 10;
    width:100%;
    height: 100%;
    background-color: rgba(0,0,0,.1);
}
.pickSex{
    z-index: 100;
    position: fixed;
    bottom:-680rpx;
    left:0;
    background-color: #fff;
    width:100%;
    border-top-left-radius: 60rpx;
    border-top-right-radius: 60rpx;
    transition: bottom .3s linear;
}
.pickSex.show{
    bottom: 0rpx;
}
picker-view{
    border-top-left-radius: 60rpx;
    border-top-right-radius: 60rpx;
}
picker-view-column{
    border-top-left-radius: 60rpx;
    border-top-right-radius: 60rpx;
}
.btn{
    width:75%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}
.btn>button{
    margin:40rpx 20rpx !important;
    width:35% !important;
}
.ava-container{
    text-align: center;
    box-sizing: border-box;
    padding-top: 60rpx;
}
.avatar image{
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
    margin-bottom: 20rpx;
}
.name-container,.sex-container{
    box-sizing: border-box;
    padding: 20rpx;
}
.title{
    font-size: 26rpx;
    color:#888;
    margin:10rpx 0;
}
.sex-container>view:last-child{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sex-container image{
    width:40rpx;
    height: 40rpx;
}
.unload{
    position: fixed;
    bottom:0;
    left:0;
    width:100%
}
.unload>view{
    background-color:#5a68fd;
    color: white;
    width: 80% ;
    border-radius: 30rpx ;
    margin:20rpx auto;
    box-sizing: border-box;
    padding: 20rpx;
    text-align: center;
    font-weight: bold;
    font-size: 32rpx;
}
.unload>view.disabled{
    opacity: 0.7;
}
.quit>view{
    width:100%;
    margin: 30rpx auto;
    font-size: 36rpx;
    color:red;
    border-radius: 10rpx;
    background-color:#F6F6F6 ;
    text-align: center;
    box-sizing: border-box;
    padding: 20rpx;
}
</style>
